<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  metaInfo() {
    return {
      title:
        this.$store.state.settings.dynamicTitle &&
        this.$store.state.settings.title,
      titleTemplate: (title) => {
        return title
          ? `${title} - ${process.env.VUE_APP_TITLE}`
          : process.env.VUE_APP_TITLE
      },
    }
  },
}
</script>

<style lang="scss">
#app {
  min-width: 1200px;
}
.btn {
  @apply py-2 text-center px-4 mr-4 mb-2 rounded-md text-white cursor-pointer;
}

// input type="number"
input[type='number'] {
  -moz-appearance: textfield;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.form-container {
  @apply p-8 px-6 pr-12;
}

.preservate-btn {
  @apply btn bg-blue-500 text-xl leading-8 w-96 h-12;
}

.form-title {
  @apply text-center text-xl border-b p-3 mt-4;
}
.self-table-form {
  // width: 968px;
  width: 100%;
  min-height: auto;

  @apply my-5 m-auto;

  .el-form-item {
    @apply mb-4;
  }
  .el-form-item__content {
    margin-left: 0 !important;
  }
  .el-input__inner,
  .el-textarea__inner {
    @apply rounded-none border-0 px-2;

    // &:focus {
    //   @apply border border-black text-black;
    // }
  }
  ::v-deep .el-input-group__append {
    border-width: 0;
    background-color: #fff;
  }

  .label {
    @apply font-bold text-center pb-2;
  }
  td,
  th {
    border-color: #bfbfbf;
    padding: 1rem .5rem;
    @apply border;
  }
  th {
    background-color: #efefef;
  }
}

.confirm-btn {
    @apply w-96 h-12 m-auto mt-4 p-4 leading-4 text-center bg-blue-500 rounded-md text-white cursor-pointer hover:bg-blue-400;
  }
</style>
